<template>

  <div class="top">
    <span>
      <van-icon name="arrow-left" />
    </span>
    <h3>登录</h3>
    <div class="tb">
      <img src="../../public/img/tb.png" alt="">
    </div>
    <van-form @submit="onSubmit">
      <!-- 用户名 -->
      <!-- <van-icon name="phone-o" style="float:left;position: relative; top:30px;font-size: 18px;"/> -->
      <van-field v-model="username" left-icon="manager-o" style="margin-left:15px" name="用户名" placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }]" />
      <!-- 密码 -->
      <!-- <van-icon name="bag-o" style="float:left;position: relative; top:30px;font-size: 18px;"/> -->
      <van-field v-model="password" left-icon="bag-o" style="margin-left:15px;" type="password" name="密码"
        icon="user-circle-o" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]" />

      <!-- 登录 -->
      <div style="margin: 16px;margin-bottom: 30px;">
        <van-button  block type="info" @click="login" native-type="submit" color="#3399ff" style="width:85%;margin:0 auto">登录</van-button>
      </div>

      <!-- 注册 忘记密码 -->
      <van-row gutter="20">
        <router-link replace to="enroll">
          <van-col span="12">新用户注册</van-col>
        </router-link>
        <router-link replace to="forget">
          <van-col span="12">忘记密码?</van-col>
        </router-link>

      </van-row>
    </van-form>
  </div>
</template>

<script scoped>
import { Dialog, } from 'vant';


export default {
  components: {
    [Dialog.name]: Dialog
  },
  data() {
    return {
      username: "",
      password: "",
      message: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    login() {
      this.$http
        .post("/user/login", {
          username: this.username,
          password: this.password
        })
        .then((res) => {
          console.log(res);
          Dialog({ message: res.data.msg });
          console.log(res.data.msg)

          // 登录成功
          // 把数据存储到本地
          if (res.data.code == 0) {
            let { userInfo, token, uid, tokenExpired } = res.data;

            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('token', token);
            localStorage.setItem('uid', uid);
            localStorage.setItem('tokenExpired', tokenExpired);


            this.$store.commit('exist', ['uid', uid]);
            this.$store.commit('exist', ['token', token]);
            this.$store.commit('exist', ['userInfo', userInfo]);
            this.$store.commit('exist', ['isLogin', true]);

            setTimeout(() => {
              this.$router.push('geren')
            }, 1500);
          }
        })
    },
  },
}
</script>450,

<style scoped>
* {
  text-align: center;
}
/* 头部 */
.top {
  width: 100%;
  height: 55px;
  background-color: #3399ff;
}

.top span {
  float: left;
  color: white;
  line-height: 55px;
  margin-left: 20px;
}

.top h3 {
  color: white;
  line-height: 55px;
  margin-top: 0;
  margin-right: 20px;
}
/* 图标 */
.top .tb{
  margin-bottom: 20px;
}
.tb img{
  width: 100px;
}
</style>
